<template>
    <div class="iframeMapBox" :style="{ width: props.width, height: props.height }">
        <div v-if="openMap" class="editorBase">
            <sxnfbtn @click="linkEditorMapUrl" v-if="btnText">{{ btnText }}</sxnfbtn>
            <!-- <el-button type="primary" @click="linkEditorMapUrl" v-if="btnText">{{ btnText }}</el-button> -->
        </div>
        <iframe :src="data.mapUrl" :width="props.width" :height="props.height" class="iframeMap" ref="iframeMap" style="border: medium none"></iframe>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
interface Props {
    width?: string;
    height?: string;
    editor?: boolean;
    btnText?: string;
    teamName?: string;
    addr?: string;
    lng?: string;
    lat?: string;
    openMap?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    width: "100%",
    height: "100%",
    editor: false,
    btnText: "打开地图",
    teamName: "",
    addr: "",
    lng: "",
    lat: "",
    openMap: false,
});
const data: any = reactive({
    mapBaseUrl: "http://192.168.9.129:5173/",
    // mapBaseUrl: "http://192.168.0.124:5173",
    mapParam: {
        from: "farmboss",
        teamName: props.teamName,
        addr: props.addr,
        origin: window.location.origin,
        lng: props.lng,
        lat: props.lat,
        editor: props.editor,
    },
    // mapUrl: "http://192.168.0.124:5173",
    mapUrl: "http://59.110.54.18:7003",
});
const linkEditorMapUrl = () => {
    window.open(data.mapUrl);
};
const myEmits = defineEmits(["getLocation"]);
// 监听地图传递的坐标参数
window.addEventListener(
    "message",
    (e) => {
        // if (e.origin.i e.origin == data.mapBaseUrl) {
        if (data.mapBaseUrl.includes(e.origin)) {
            // console.log(e, "地图传递的参数");
            let location = {
                alt: e.data.location._alt,
                lng: e.data.location._lng,
                lat: e.data.location._lat,
            };
            myEmits("getLocation", location);
        }
    },
    false
);
// 配置地图参数
const settingMapParameters = () => {
    let param: any = [];
    Object.keys(data.mapParam).forEach((key) => {
        param.push(`${key}=${data.mapParam[key]}`);
    });
    data.mapUrl = `${data.mapBaseUrl}?${param.join("&")}`;
};
settingMapParameters();
</script>

<style scoped="scoped">
.iframeMapBox {
    position: relative;
    width: 100%;
    height: 100%;
}
.editorBase {
    position: absolute;
    z-index: 999;
    width: 100%;
    top: 10px;
    right: 10px;
    text-align: right;
}
</style>
